<template>
  <div class="body-container">
    <div class="auth-login-div" v-if="isLogin">
      <i class="el-icon-loading"></i>
      <div class="auth-login-div-txt">
        {{warningMsg}}
      </div>
    </div>
    <el-empty :image="errorImage" :image-size="150" v-else>
      <span slot="description">
        {{warningMsg}}
      </span>
    </el-empty>
  </div>
</template>

<script>
  import defaultSettings from '@/settings'
  import errorImage from '@/assets/images/error-warning.png'
  export default {
    name: 'login',
    data() {
      return {
        errorImage: errorImage,
        title: defaultSettings.title,
        codeUrl: '',
        loginForm: {
          account: '',
          pwd: ''
        },
        isLogin: true,
        warningMsg: '授权登录中...'
      }
    },
    created() {
      this.loginForm.account = this.$route.query.account || ''
      this.loginForm.pwd = this.$route.query.pwd || ''
      this.handleLogin()
    },
    methods: {
      handleLogin() {
        var that = this
        if (!this.loginForm.account || !this.loginForm.pwd) {
          this.isLogin = false
          this.warningMsg = '参数错误'
          return
        }
        const user = {
          account: this.loginForm.account,
          pwd: this.loginForm.pwd,
          authLogin: true
        }
        this.warningMsg = '授权登录中...'
        this.$store
          .dispatch('Login', user)
          .then(res => {
            if (res.status) {
              this.warningMsg = '登录成功，正在跳转到首页...'
              setTimeout(() => {
                this.$router.push({
                  path: '/index'
                })
              }, 1000)
            } else {
              this.isLogin = false
              this.warningMsg = res.msg
            }
          }).catch((error) => {
            this.isLogin = false
            this.warningMsg = error
          })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .auth-login-div {
    text-align: center;
    padding-top: 100px;
  }

  .auth-login-div .el-icon-loading {
    font-size: 30px;
  }

  .auth-login-div-txt {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
  }
</style>
